<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>watch浅度监听</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="box">
        <input type="text" v-model="mytext">
        <select name="" id="" v-model="obj.year"> 
            <!-- 当v-model双向绑定一个下拉列表时,首次会根据data中的变量值显示 -->
            <option value="2021">2021</option>
            <option value="2022">2022</option>
            <option value="2023">2023</option>
            <option value="2024">2024</option>
        </select>
        <select name="" id="" v-model="obj.month">
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
        </select>
        <select name="" id="" v-model="obj.day">
            <option value="28">28</option>
            <option value="29">29</option>
            <option value="30">30</option>
            <option value="31">31</option>
        </select>
    </div>
</body>
<script>
    let obj = {
        data(){
            return{
                mytext:'',
                obj:{
                    year:2023,
                    month:11,
                    day:31,
                }
            }
        },
        watch:{
            // 浅监听,可以监听字符串、普通数组、对象中具体属性的变化，无法直接监听到某个对象
            // mytext(value,oldvalue){
            //     console.log(value,oldvalue);
            // }
            mytext:'anyfunc',  //当监听的是一个字符串时,vue会自动取methods中查找是否具备同名方法,如果有则运行, 
            'obj.year':'anyfunc',  //注意,直接监听obj对象时,监听不到,因为现在还是浅层监听,可以将监听名写具体,如对象中下具体的某一属性,要加引号
            'obj.month':'anyfunc',
            'obj.day':'anyfunc',
        },
        methods: {
            anyfunc(value,oldvalue){
                console.log(value,oldvalue);
            }
        },
        
    }
    let app = Vue.createApp(obj).mount('#box');
</script>
</html>